
import { useMount } from 'ahooks';
import { OlapData01 } from '../Data'


import { PivotGrid } from '@grapecity/wijmo.react.olap';
import { FlexGrid } from '@grapecity/wijmo.react.grid';
import { PivotEngine } from '@grapecity/wijmo.olap';
import { useState } from 'react';

const WijmoAA01 = () => {

    const [Data, setData] = useState()

    useMount(() => {

        const data = new PivotEngine({
            itemsSource: OlapData01(10000),
            showRowTotals: 'Subtotals',
            fields: [
                { binding: 'date', header: 'Quarter', format: '\"Q\"q yyyy' },
                { binding: 'date', header: 'Month', format: 'MMMM' },
                { binding: 'agent', header: 'Agent' },
                { binding: 'region', header: 'Region' },
                { binding: 'platform', header: 'Platform' },
                { binding: 'product', header: 'Product' },
                { binding: 'sales', header: 'Sales', format: 'c2' },
                { binding: 'downloads', header: 'Downloads', format: 'n0' },
                { binding: 'revenue', header: 'Revenue', format: 'c2' },
            ],
            rowFields: ['Quarter', 'Region'],
            columnFields: ['Platform', 'Product'],
            valueFields: ['Sales', 'Downloads', 'Revenue']
        })
        setData(data)
    })

    if (Data) {
        return (
            <div className="Page">
                <div className='Split'>
                    <div>
                        <FlexGrid itemsSource={Data.collectionView}></FlexGrid>
                    </div>
                    <div>
                        <PivotGrid itemsSource={Data}></PivotGrid>
                    </div>
                </div>
                <div>修改左侧右侧同时变动</div>
                <div>双击右侧单元格可看到统计数据</div>
            </div>
        );
    }

};

export default WijmoAA01